import React from "react"
import { NavBar, Icon, Tabs, WhiteSpace ,DatePicker ,Picker,TextareaItem,Toast,Button,Modal} from 'antd-mobile';
import getInformation2 from "./information.module.css"
import {getDetail1,getLoginStatus,UpdateUserInformation} from './api/index'
import {List,InputItem } from "antd-mobile"
// import { createForm } from 'rc-form';
const Item = List.Item
const genders = [
    [{
        label:'男',
        value:1
    },
    {
        label:'女',
        value:0
    }]
]
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
  moneyKeyboardWrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
class MyInformation extends React.Component{
    constructor(props){
        super(props)
        this.state={
            information:[],
            time1:'',
            time:'',
            UserNickname:'',
            gender:[],
            signature:'',
            modal2:false
        }
    }
    componentDidMount(){
        let uid = localStorage.getItem('uId')
        getDetail1(uid).then(body=>body.json())
        .then(res=>{
            console.log(res)
            let {profile} = res
            
            this.setState({
                information:profile,
                gender:profile.gender,
                // time:new Date()
                // time:new Date(this.state.information.birthday)
                time:new Date(profile.birthday),
                signature:profile.signature,
                UserNickname:profile.nickname
            })

            console.log(this.state)
            // console.log(this.state.information)
            // let time = new Date(this.state.information.birthday)
            // console.log(time)
            // let time = new Date(this.state.information.birthday)
            // console.log(time)
            // console.log(time.getFullYear())
            // console.log(time.getMonth()+1)
            // console.log(time.getDate())
        })
        // getLoginStatus().then(body=>body.json())
        // .then(res=>{
        //     console.log(res)
        // })
    }
    Huitui(){
        
        console.log(this.state)
        UpdateUserInformation(this.state.gender,this.state.signature,320100,this.state.UserNickname,this.state.time.getTime(),320000)
        .then(body=>body.json())
        .then(res=>{
            console.log(res)
            if(res.code==200){
                Toast.success('修改成功 !!!', 1);
            }
        })
        this.props.history.push('/info')
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
          [key]: true,
        });
      }
      onClose = key => () => {
        this.setState({
          [key]: false,
          UserNickname:this.state.UserNickname
        });
      }
    render(){
        // const { getFieldProps } = this.props.form;
        // console.log(this.state.time)
        // console.log(time)
        // let time2 = new Date(this.state.information.birthday)
        // this.state.time1=time2.getFullYear()+'-'+(time2.getMonth()+1)+'-'+(time2.getDate())
        // console.log(this.state.time1)
        return(
            <div className="img33">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.Huitui.bind(this)}/>}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={[
                        <img src={require('./img/音乐.png')}/>,
                    ]}
                    className={getInformation2.header}>我的资料</NavBar>
                <div className={getInformation2.header1}>
                    <span>上传头像并完善个人信息,即可获得积分~</span>
                </div>
                <Item
                arrow="horizontal"
                onClick={() => {}}
                extra={<img src={this.state.information.avatarUrl}></img>}
                className="img44"
                >头像</Item>
                <Item
                
                arrow="horizontal"
                onClick={this.showModal('modal2')}
                extra={this.state.UserNickname}
                >呢称</Item>
                <Modal
                popup
                visible={this.state.modal2}
                onClose={this.onClose('modal2')}
                animationType="slide-up"
                // afterClose={() => { alert('afterClose'); }}
                >
                <List  className="popup-list">
                    <header>修改呢称</header>
                <InputItem
                    defaultValue={100}
                    value={this.state.UserNickname}
                    clear
                    moneyKeyboardAlign="left"
                    moneyKeyboardWrapProps={moneyKeyboardWrapProps}
                    onChange={v=>{
                        this.setState({
                            UserNickname:v
                        })
                        console.log(this.state.UserNickname)
                    }}
                    
                ></InputItem>
                <WhiteSpace></WhiteSpace>
                <Button onClick={this.onClose('modal2')}>确认修改</Button>
                </List>
                </Modal>

                {/* <DatePicker
                value={this.state.information.nickname}
                onChange={data => 
                    {
                        console.log(data)
                        this.setState({ UserNickname:data })
                    }}
                >
                <List.Item arrow="horizontal">呢称</List.Item>
                </DatePicker> */}
                
                
                <Picker
                data={genders}
                cascade={false}
                extra={Number(this.state.gender)===1?'男':'女'}
                value={this.state.sValue}
                onChange={v => {
                    this.setState({ gender: v })
                    console.log(this.state.gender)
                }
                }
                // onOk={v => this.setState({ gender: v })}
                >
                <List.Item arrow="horizontal">性别</List.Item>
                </Picker>
                <Item
                
                arrow="horizontal"
                onClick={() => {}}
                extra={<img src={require('./img/二维码.png')}></img>}
                >二维码</Item>
                <WhiteSpace></WhiteSpace>
                {/* <Item
                
                arrow="horizontal"
                onClick={() => {}}
                extra={this.state.information.birthday>0?this.state.time2:'输入生日信息'}
                
                >生日</Item> */}
                <DatePicker
                mode="date"
                value={this.state.time}
                onChange={date => 
                    {
                        this.setState({ time:date })
                        console.log(this.state.time.getTime())
                    }}
                >
                <List.Item arrow="horizontal">生日</List.Item>
                </DatePicker>
                <Item
                
                arrow="horizontal"
                onClick={() => {}}
                extra='安徽 合肥'
                >地区</Item>
                <Item
                
                arrow="horizontal"
                onClick={() => {}}
                extra="桃花镇男子技术学院"
                >大学</Item>
                <WhiteSpace></WhiteSpace>
                <Item
                
                >介绍</Item>
                 <TextareaItem
                    // {...getFieldProps('count', {
                    // initialValue: '计数功能,我的意见是...',
                    // })}
                    // value={this.state.signature}
                    value={this.state.signature}
                    
                    rows={8}
                    count={300}
                    onChange={value=>{
                        // console.log(value)
                        this.setState({
                            signature:value
                        })
                        console.log(this.state.signature)
                    }}
                />
                <Item
                
                arrow="horizontal"
                onClick={() => {}}
                >账号和绑定设置</Item>
                <Item
                
                arrow="horizontal"
                onClick={() => {}}
                >个人主页绑定设置</Item>
                
            </div>
        )
    }
}

export default MyInformation